<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <link rel="stylesheet" href="../assets/layui/css/layui.css">
    <link rel="shortcut icon" href="../../public/logo-mi2.ico" type="image/x-icon">
</head>

<body>
    <div class="main-container">

        <!-- -------- 顶部链接 --------  -->
        <!-- #region  -->
        <nav class="main-nav-wrap">
            <div class="nav-wrap">
                <section class="nav-item-wrap nav-left-wrap">
                    <ul>
                        <li class="sg-nav-item"><a href="javascript:;">小米商城</a></li>|
                        <li class="sg-nav-item"><a href="javascript:;">MIUI</a></li>|
                        <li class="sg-nav-item"><a href="javascript:;">IoT</a></li>|
                        <li class="sg-nav-item"><a href="javascript:;">云服务</a></li>|
                        <li class="sg-nav-item"><a href="javascript:;">天星数科</a></li>|
                        <li class="sg-nav-item"><a href="javascript:;">有品</a></li>|
                        <li class="sg-nav-item"><a href="javascript:;">小爱开放平台</a></li>|
                        <li class="sg-nav-item"><a href="javascript:;">企业团购</a></li>|
                        <li class="sg-nav-item"><a href="javascript:;">资质证照</a></li>|
                        <li class="sg-nav-item"><a href="javascript:;">协议规则</a></li>|
                        <li class="sg-nav-item"><a href="javascript:;">下载App</a></li>|
                        <li class="sg-nav-item"><a href="javascript:;">智能生活</a></li>
                    </ul>
                </section>
                <section class="nav-item-wrap nav-right-wrap">
                    <ul>
                        <li class="sg-nav-item"><a href="./login.html">登录</a></li>|
                        <li class="sg-nav-item"><a href="javascript:;">注册</a></li>|
                        <li class="sg-nav-item"><a href="javascript:;">消息通知</a></li>

                        <li class="sg-nav-item cart-item">
                            <a href="javascript:;">
                                <i class="layui-icon layui-icon-cart"></i>
                                购物车
                            </a>
                            <section class="cart-wrap">
                                购物车中还没有商品, 赶紧选购吧!
                            </section>
                        </li>
                    </ul>
                </section>
            </div>
        </nav>
        <!-- #endregion  -->
        <!-- -------------------  -->

        <!-- -------- 导航栏 --------  -->
        <!-- #region  -->
        <header class="main-header-wrap">
            <section class="header-wrap">

                <!-- 图标 -->
                <div class="header-wrap-left">
                    <a class="site-icon" href="./index.html">
                        <img src="../../public/logo-mi2.ico" alt="">
                    </a>
                </div>

                <!-- 导航栏 -->
                <div class="header-wrap-center">
                    <section id="has-dropdown" class="sg-dropdown-item has-dropdown">
                        <a id="has-dropdown" href="javascript:;">
                            Xiaomi手机
                        </a>
                    </section>
                    <section id="has-dropdown" class="sg-dropdown-item has-dropdown">
                        <a id="has-dropdown" href="javascript:;">Redmi手机</a>
                    </section>
                    <section class="sg-dropdown-item">
                        <a href="javascript:;">电视</a>
                    </section>
                    <section class="sg-dropdown-item">
                        <a href="javascript:;">笔记本</a>
                    </section>
                    <section class="sg-dropdown-item">
                        <a href="javascript:;">平板</a>
                    </section>
                    <section class="sg-dropdown-item">
                        <a href="javascript:;">家电</a>
                    </section>
                    <section class="sg-dropdown-item">
                        <a href="javascript:;">路由器</a>
                    </section>
                    <section class="sg-dropdown-item">
                        <a href="javascript:;">服务中心</a>
                    </section>
                    <section class="sg-dropdown-item">
                        <a href="javascript:;">社区</a>
                    </section>
                </div>

                <!-- 搜索框 -->
                <div class="header-wrap-right">
                    <div class="search-wrap">
                        <section class="search-input-wrap">
                            <input type="search" id="search-input" placeholder="耳机">
                        </section>

                        <section class="search-icon">
                            <i class="layui-icon layui-icon-search"></i>
                        </section>
                    </div>
                </div>

                <div id="has-dropdown" class="dropdown-board"> </div>
            </section>

        </header>
        <!-- #endregion  -->
        <!-- -------------------  -->

        <!-- -------- 商品顶栏 --------  -->
        <!-- #region  -->
        <header class="goods-header-wrap">
            <section class="goods-header">
                <section class="goods-brand">
                    <span class="goods-name">Xiaomi Civi 2</span>
                    &emsp;|&emsp;
                    <span class="goods-branch">Xiaomi Civi</span>
                </section>

                <section class="goods-support">
                    <a href="javascript:;">概述页</a> &emsp;|&emsp;
                    <a href="javascript:;">参数页</a> &emsp;|&emsp;
                    <a href="javascript:;">F码通道</a> &emsp;|&emsp;
                    <a href="javascript:;">咨询客服</a>&emsp;|&emsp;
                    <a href="javascript:;">用户评价</a>
                </section>
            </section>
        </header>
        <!-- #endregion  -->
        <!-- -------------------  -->

        <section class="main-goods-wrap">
            <section class="goods-wrap">
                <!-- 商品轮播 -->
                <section class="goods-swiper-wrap">
                    <div class="layui-carousel" id="ID-carousel-demo-image">
                        <div carousel-item>
                            <div>
                                <img
                                    src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1664192131.5869654.png">
                            </div>
                            <div>
                                <img
                                    src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1664192129.37246333.png">
                            </div>
                            <div>
                                <img
                                    src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1664192136.00276876.png">
                            </div>
                            <div>
                                <img
                                    src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1664192133.62233125.png">
                            </div>
                            <div>
                                <img
                                    src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1664192131.5869654.png">
                            </div>
                            <div>
                                <img
                                    src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1664192126.84785883.png">
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 商品选项 -->
                <section class="goods-option-wrap">
                    <section class="goods-title">Xiaomi Civi 2</section>
                    <section class="goods-option">前置仿生双主摄｜旗舰级后置相机｜ 第一代骁龙7移动平台｜不锈钢VC液冷散热｜4500mAh大电量｜AMOLED微曲屏</section>
                    <section class="goods-price">2499 元</section>

                    <hr>

                    <form>
                        <!-- 地址选择 -->
                        <section class="user-location form-sect">
                            <i class="layui-icon layui-icon-location"></i>
                            <span>北京 北京市 海淀区 清河街道</span>
                            <span style="color: rgb(255, 103, 0);">修改</span>
                            <input name="address" id="address" type="text" hidden>
                        </section>

                        <!-- 版本选择 -->
                        <section class="version-choose form-sect">
                            <div class="choose-type-title">选择版本</div>
                            <div class="sg-radio-wrap">
                                <input type="radio" name="opt-type" id="8GB+256GB" value="8GB+256GB" checked>
                                <label for="8GB+256GB">8GB+256GB</label>
                            </div>
                            <div class="sg-radio-wrap">
                                <input type="radio" name="opt-type" id="12GB+256GB" value="12GB+256GB">
                                <label for="12GB+256GB">12GB+256GB</label>
                            </div>
                        </section>

                        <!-- 颜色选择 -->
                        <section class="color-choose-wrap form-sect">
                            <div class="choose-type-title">选择颜色</div>
                            <div class="color-choose-wrap">
                                <div class="sg-radio-wrap">
                                    <input type="radio" name="color-type" id="小白裙" value="小白裙" checked>
                                    <label for="小白裙">小白裙</label>
                                </div>
                                <div class="sg-radio-wrap">
                                    <input type="radio" name="color-type" id="怦怦粉" value="怦怦粉">
                                    <label for="怦怦粉">怦怦粉</label>
                                </div>
                            </div>
                        </section>

                        <section class="submit-wrap form-sect">
                            <input class="btn btn-primary" type="submit" value="提交">
                        </section>
                    </form>
                </section>
            </section>
        </section>

        <!-- -------- 页脚 --------  -->
        <!-- #region  -->
        <footer class="main-footer-wrap">
            <div class="footer-wrap">
                <section class="footer-col">
                    <div class="col-header">帮助中心</div>
                    <div class="col-item">售后政策</div>
                    <div class="col-item">自助服务</div>
                    <div class="col-item">订单操作</div>
                </section>
                <section class="footer-col">
                    <div class="col-header">服务支持</div>
                    <div class="col-item">账户管理</div>
                    <div class="col-item">购物指南</div>
                    <div class="col-item">相关下载</div>
                </section>
                <section class="footer-col">
                    <div class="col-header">线下门店</div>
                    <div class="col-item">小米之家</div>
                    <div class="col-item">服务网点</div>
                    <div class="col-item">授权体验店</div>
                </section>
                <section class="footer-col">
                    <div class="col-header">关于小米</div>
                    <div class="col-item">了解小米</div>
                    <div class="col-item">投资者关系</div>
                    <div class="col-item">廉洁举报</div>
                </section>

                <section class="footer-col else-info">
                    <p class="phone">400-100-5678</p>
                    <p class="time">9:00-18:00（仅收市话费）</p>
                    <section class="btn btn-primary">人工客服</section>
                    <div class="follow">
                        关注小米：
                        <span><i class="layui-icon layui-icon-login-wechat"></i></span>
                        <span><i class="layui-icon layui-icon-login-weibo"></i></span>
                    </div>
                </section>
            </div>
        </footer>
        <!-- #endregion  -->
        <!-- -------------------  -->
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.9.8/layui.min.js"></script>

    <script>

        layui.use(function () {
            var carousel = layui.carousel;
            // 渲染 - 图片轮播
            carousel.render({
                elem: '#ID-carousel-demo-image',
                width: 'auto',
                height: '560px',
                interval: 5000,
                anim: 'fade',
            });
        });
    </script>
</body>

</html>